<template>
	<view class="content-wrapper">
		<Header title="活动详情" background="#fff" color="#333" :back="true"></Header>
		<template v-if="info">
			<view class="content-header">
				<view class="image">
					<image :src="info.image"></image>
				</view>
				<view class="title">{{ info.activityName }}</view>
			</view>
			<view class="content" :style="{ paddingBottom: info.isJump == 1 && info.wxAppid ? '136rpx' : '80rpx' }">
				<view class="title">活动简介</view>
				<view class="brief">{{ info.activityIntro || '' }}</view>
				<view class="title">活动详情</view>
				<view class="detail">
					<!-- <rich-text :nodes="info.activityDesc" space="nbsp" style="white-space:pre-wrap;"></rich-text> -->
					<rich-text :nodes="info.activityDesc" space="nbsp"></rich-text>
				</view>
			</view>
			<template v-if="info.isJump == 1 && info.wxAppid">
				<view class="bottom">
					<button @click="jumpXcx">立即跳转</button>
				</view>
			</template>
			<template v-else-if="info.isSignup == 1">
				<view class="bottom" v-if="info.isUserSignup == 0">
					<button @click="jumpSignup">我要报名</button>
				</view>
				<view class="bottom hasSignup" v-else>
					<button @click="jumpSignup">已报名</button>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	import Header from '@/pages/components/header.vue'
	
	import {
		getActivityInfo,
		signUp
	} from '@/api/activity.js'
	
	import {
		getUserProfile
	} from '@/utils/getUserProfile.js'
	
	export default {
		components: {
			Header
		},
		data() {
			return {
				id: '',
				info: null
			}
		},
		onLoad(options) {
			if (options != null && options != undefined) {
				this.id = options.id
				this.getInfo()
			}
		},
		methods: {
			getInfo() {
				const userId = uni.getStorageSync("userId") || ''; 
				getActivityInfo(this.id, { userId }).then(data => {
					if (data.code == 200) {
						var info = data.data
						info.activityDesc = info.activityDesc.replace(/\<img/g, "<img style='width: 100%;height: auto;'")
						this.info = info
					} else {
						uni.showToast({
							title: '未查询到数据！',
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			jumpXcx() {
				uni.navigateToMiniProgram({
				  appId: this.info.wxAppid,
				  path: this.info.wxPage,
				  success(res) {
				    // 打开成功
					console.log(222);
				  }
				})
			},
			// 报名
			async jumpSignup() {
				var userId = uni.getStorageSync("userId");
				if (!userId) {
					let data = await getUserProfile()
					if (data.code == 200) {
						await this.signUp()
					}
				} else {
					await this.signUp()
				}
			},
			// 处理报名
			async signUp() {
				let userId = uni.getStorageSync("userId");
				const data = await signUp({ userId, activityId: this.id });
				uni.showToast({
					title: data.msg,
					duration: 1000,
					icon: 'none',
				})
				if (data.code == 200) {
					setTimeout(() => {
						this.getInfo()
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import './index.less';
</style>